<template>
	<div class="wrapper">
		<div class="bac">
			<div class="cash">
				提现到
			</div>
			<div class="dis">
				<div class="dia">
					<img src="@/assets/terminal/bank.png" alt="" class="bank" />
					<div class="redlining">
						{{bankCardName}}（{{bankCardNo}}）
					</div>
				</div>
			</div>
		</div>

		<div class="main">
			<div class="figure">
				提现金额
			</div>
			<div class="line">
				<div class="dia">
					<span>¥</span>
					<input type="text" placeholder="请输入提现金额" class="inp" v-model="amount" />
				</div>
			</div>
			<div class="dia main_footer">
				<div class="">
					提现金额为：{{withdrawRange[0]}}-{{withdrawRange[1]}}
				</div>
				<div class="extract" @click="entire">
					全部提取
				</div>
			</div>
			<div class="btn_box">
				<button class="btn dis" @click="submit" :disabled="loading">
					确认
					<!-- <loading11></loading11> -->
				</button>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		getCash,
		selectAgencyConfig,
		selectAgentInf
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',

		setup() {
			const router = useRoute()
			// const route = useRoute()
			const state = reactive({
				withdrawRange: [],
				amount: "",
				loading: false,
				bankCardName: "",
				bankCardNo: ""
			})
			// console.log(channelCode)
			//获取区间
			const getFindPageList = () => {
				selectAgencyConfig({
					channelCode: router.query.channelCode
				}).then(res => {
					state.withdrawRange = res.data.withdrawRange.split(',')
				})
			}
			//全部提现
			const entire = () => {
				state.amount = router.query.accountBalance
			}
			//获取代理结算卡信息
			const getAgentInf = () => {
				let parames = {}
				selectAgentInf(parames).then(res => {
					state.bankCardName = res.data.bankCardName
					state.bankCardNo = res.data.bankCardNo.slice(-4)
				})
			}
			getAgentInf()
			//提现
			const submit = () => {
				if(!state.amount.length>0){
					showToast('请输入提现金额')
					return
				}
				if (state.amount < Number(state.withdrawRange[0]) || state.amount > Number(state.withdrawRange[
						1])) {
					showToast('不满足提现需求')
					return
				}
				state.loading = true
				getCash({
					channelCode: router.query.channelCode,
					amount: state.amount,
					accountType: router.query.accountType,
					isMerge:0
				}).then(res => {
					state.loading = false
					state.amount = ''
					showToast('提现成功')
				}).catch(error=>{
					state.loading = false
					// state.amount = ''
					// showToast('提现成功')
				})
			}
			getFindPageList()
			return {
				...toRefs(state),
				getFindPageList,
				submit,
				entire
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #fff;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #333333;

		.bac {
			background-color: #fff9f9;
			padding-bottom: 12px;
			box-sizing: border-box;

			.cash {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				padding: 14px 0px 14px 18px;
				box-sizing: border-box;
			}

			.bank {
				width: 24px;
				height: 24px;
				border-radius: 50%;
			}

			.redlining {
				margin-left: 12px;
				font-size: 16px;
			}
		}

		.main {
			width: 100%;
			background-color: #fff;
			height: 88vh;
			padding-top: 14px;
			padding-left: 19px;
			padding-right: 19px;
			box-sizing: border-box;

			.figure {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
			}

			.line {
				border-bottom: 1px solid #F3F3F3;
				margin-top: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 23px;
				color: #333333;
				padding-bottom: 4px;
				box-sizing: border-box;

				.inp {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 15px;
					color: #333333;
					margin-left: 14px;
				}
			}
		}

		.main_footer {
			justify-content: space-between;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #CCCCCC;
			margin-top: 12px;

			.extract {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #FF2828;
			}

		}

		.btn_box {
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translateX(-50%);

			.btn {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 15px;
				color: #FFFFFF;
				width: 339px;
				height: 41px;
				background: #FF2828;
				border-radius: 6px;
			}
		}
	}
</style>